<template>
  <div class="container">
    <div class="header">
      <van-nav-bar title="商品详情" left-arrow @click-left="handleLeft"></van-nav-bar>
    </div>
    <div class="content">
      <div style="margin-left: 12px">快递公司: {{ route.query.shippingCompany }}</div>
      <div style="margin-top: 30px; margin-left: 12px">快递单号: {{ route.query.trackingNumber }} <van-image :src="copy"
          class="imgs" @click="copyClick" v-show="route.query.trackingNumber" /></div>
      <div style="margin-top: 50px">
        <van-steps direction="vertical" :active="0" active-icon="checked" active-color="#FF0000">
          <van-step v-for="(item, index) in logisticsTraceDetailList" :key="index">
            <div style="color: black;margin-top: 20px">
              <div :style="{ 'color': item.logisticsStatus === 'SIGN' ? 'red' : 'black' }">
                <span style="margin-right: 10px;font-size: 20px">{{ statusFormat(item.logisticsStatus) }}</span>
                <span>{{ formatTimestamp(item.time) }}</span>
              </div>
              <div style="margin-top: 10px" v-html="highlightPhoneNumbers(item.desc)"></div>
            </div>
          </van-step>
        </van-steps>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { useRoute } from "vue-router";
const route = useRoute();
import { getLogisticsTraceDetailList } from '@/api/productList/index.ts'
import { ref } from "vue";
import { copyTextToClipboard } from "@/utils";

const copy = new URL("@/assets/productHome/icon_fuzhi.png", import.meta.url).href;
/** 轨迹数据*/
const logisticsTraceDetailList = ref<any[]>([]);
/** 返回区分不同地址 */
const handleLeft = () => {
  router.back();
};
/** 页面加载时调用 getLogisticsTraceDetailList 方法 */
const getcategoryColumns = async () => {
  const res = await getLogisticsTraceDetailList({ "orderNo": route.query.trackingNumber, "cpCode": route.query.logisticsType });
  if (res.data) {
    logisticsTraceDetailList.value = JSON.parse(res.data.trajectory).reverse()
  }
};
getcategoryColumns();

//状态转换
const statusFormat = (status: string) => {
  switch (status) {
    case "WAIT_ACCEPT":
      return "待揽收";
    case "ACCEPT":
      return "已揽件";
    case "TRANSPORT":
      return "运输中";
    case "DELIVERING":
      return "派件中";
    case "AGENT_SIGN":
      return "已代签收";
    case "SIGN":
      return "已签收";
    case "FAILED":
      return "包裹异常";
    default:
      return "未知状态";
  }
}
//时间格式转换
function formatTimestamp(timestamp: number): string {
  const date = new Date(timestamp); // 将时间戳转为 Date 对象

  // 获取各个时间部分
  const year = date.getFullYear(); // 获取年份
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始，所以加1）
  const day = String(date.getDate()).padStart(2, '0'); // 获取日期
  const hours = String(date.getHours()).padStart(2, '0'); // 获取小时
  const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟
  const seconds = String(date.getSeconds()).padStart(2, '0'); // 获取秒数

  // 格式化并返回
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

//手机号匹配
function highlightPhoneNumbers(text) {
  // 正则表达式匹配手机号（中国常见手机号格式）
  const phoneRegex = /\b(\d{11})\b/g;

  // 使用 replace 方法，将匹配到的手机号替换为带有 red 样式的 span
  return text.replace(phoneRegex, (match) => {
    return `<span style="color: red; cursor: pointer;" @click="handlePhoneClick('${match}')">${match}</span>`;
  });
}

/** 复制 */
const copyClick = (title: string) => {
  copyTextToClipboard(title)
}

</script>

<style scoped lang="less">
.container {
  background-color: white;

  .content {
    padding: 60px 20px 0px 20px;
  }
}

.header {
  background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
  filter: blur(0px);
  height: 90px;
  padding-top: 44px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  z-index: 6003;

  :deep(.van-icon-arrow-left) {
    color: #1a1b1c !important;
  }

  :deep(.van-nav-bar) {
    background: none !important;
  }

  :deep(.van-nav-bar__content) {
    background-color: transparent !important;
  }
}

.imgs {
  width: 16px;
  height: 16px;
}
</style>